import React from 'react'
import PropTypes from 'prop-types'
import { Table, Tag,Button,Modal } from 'antd'
import classnames from 'classnames'
import { Link } from 'dva/router'
import styles from './videoMessage.less'
import { color } from '../../../utils'

const confirm = Modal.confirm

const status = {
  1: {
    color: color.green,
    text: 'APPROVED',
  },
  2: {
    color: color.yellow,
    text: 'PENDING',
  },
  3: {
    color: color.red,
    text: 'REJECTED',
  },
}

const VideoMessage = ({ onDeleteItem, onEditItem, location, ...tableProps }) => {
  debugger
  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      onEditItem(record)
    } else if (e.key === '2') {
      confirm({
        title: 'Are you sure delete this record?',
        onOk () {
          onDeleteItem(record.id)
        },
      })
    }
  }

  const columns = [
    {
      title: 'avatar',
      dataIndex: 'avatar',
      width: 48,
      className: styles.avatarcolumn,
      render: (text,it) => <span className={styles.avatar}>
        <img src={it.headimgurl} className={styles.image} />
      </span>,

}, {
      title: 'content',
      dataIndex: 'content',
      render: (text,it) => <div>
    <h5 className={styles.name}>{it.nickname}</h5>
    <p className={styles.content}>
    <video width="320" height="240" controls="controls" autoplay="autoplay">
        <source src={it.content} type="video/ogg" />
        <source src={it.content} type="video/mp4" />
        <source src={it.content} type="video/webm" />
        <object data={it.content} width="320" height="240">
          <embed width="320" height="240" src="/i/movie.swf" />
        </object>
        </video>
    </p>
    <div className={styles.daterow}>
    <Tag color={it.isRead?color.green:color.red}>{it.isRead?'已读':'未读'}</Tag>
    <span className={styles.date}>{new Date(it.createTime).format("yyyy-MM-dd HH:mm:ss")}</span>
    </div>
    </div>,
  },
]

  return (
    <div className={styles.textMessage}>
<Table
  {...tableProps}
  showHeader={false}
  columns={columns}
  simple
  rowKey={record => record.id}
/>
  </div>
)
}

VideoMessage.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default VideoMessage
